<template>
    <div class="bg" :style="scaleStyle">
        <el-autocomplete class="search-input" v-model="userCode" :fetch-suggestions="querySearch" placeholder="请输入工号"  @blur="inputBlur"
            @focus="show = true" :trigger-on-focus="false">
            <el-select v-model="select" slot="prepend">
                <el-option label="DS" value="DS"></el-option>
                <el-option label="JS" value="JS"></el-option>
            </el-select>
        </el-autocomplete>
        <div class="btn" @click="goSearch">查询</div>
        <number-keyboard @input="updateInput" @blur="show = false" v-show="show" @hide="hide"
            :inputValue="userCode"></number-keyboard>
    </div>
</template>
<script>
import NumberKeyboard from '@/components/NumberKeyboard.vue'
export default {
    components: {
        NumberKeyboard
    },
    computed: {
        /* 屏幕缩放倍数 */
        scaleStyle() {
            return {
                transform: 'scale(' + this.screenScale.scaleX + ',' + this.screenScale.scaleY + ')'
            }
        }
    },
    data() {
        return {
            select: 'DS',
            screenScale: {
                scaleX: 1,
                scaleY: 1
            },
            userList: userList,
            userCode: '',
            show: false
        }
    },
    mounted() {
        this.scale()
        window.addEventListener('resize', this.scale)
        this.$once('hook:beforeDestory', () => {
            window.removeEventListener('resize', this.scale)
        })
    },
    methods: {
        hide() {
            this.show = false;
        },
        updateInput(value) {
            this.userCode = value; // 更新输入框的值
        },
        /* 界面伸缩 */
        scale() {
            let width = document.body.clientWidth
            let height = document.body.clientHeight
            const scaleX = width / 1080
            const scaleY = height / 1920
            let scale = scaleY < scaleX ? scaleY : scaleX
            this.screenScale = {
                scaleX: scale,
                scaleY: scale
            }
        },
        querySearch(queryString, cb) {
            let userList = this.userList.map(item => {
                return { value: item.value.replace(/DS/g, "").replace(/JS/g, "") }
            });
            let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
            cb(results);
        },
        createFilter(queryString) {
            return (user) => {
                return (user.value.indexOf(queryString) > -1);
            };
        },
        goSearch() {
            this.hide();
            if (this.userCode) {
                let parmams = this.userList.find(item => item.value == (this.select + this.userCode))
                if (parmams) {
                    this.$router.push({ path: '/joinDate', query: { ...parmams } })
                } else {
                    this.$message({
                        message: '未查到当前人员',
                        type: 'warning'
                    });
                }
            } else {
                this.$message({
                    message: '请输入人员工号',
                    type: 'warning'
                });
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.bg {
    width: 1080px;
    height: 1920px;
    background: url('~@/assets/image/bg.jpg') no-repeat;
    background-size: 100% 100%;
    transform-origin: top left;
}

.search-input {
    width: 70%;
    margin: 600px 15% 0;

    ::v-deep .el-input__inner {
        height: 100px;
        font-size: 40px;
        padding: 0 40px;
    }
}

.btn {
    width: 600px;
    height: 130px;
    background: url('~@/assets/image/btn2.png') no-repeat;
    background-size: 100% 100%;
    color: #bf0202;
    text-align: center;
    font-size: 52px;
    line-height: 130px;
    margin-left: 240px;
    margin-top: 150px;
    font-family: 宋体;
    font-weight: bold;
    cursor: pointer;
}
</style>
<style>
.el-autocomplete-suggestion li {
    padding: 10px 20px !important;
    line-height: 45px !important;
    font-size: 30px !important;
}

.el-message .el-icon-warning {
    font-size: 34px !important;
}

.el-message__content {
    font-size: 24px;
}

.van-key {
    height: 120px;
    font-size: 54px;
}

.van-key__collapse-icon,
.van-key__delete-icon {
    width: 54px;
    height: 54px;
}

.el-input-group__prepend .el-select {
    width: 160px;
    color: #000;
}

.el-select .el-input .el-select__caret {
    font-size: 32px;
    color: #000;
}

.el-input__suffix {
    right: 12px;
}

.el-select-dropdown__item {
    font-size: 36px;
    height: 70px;
    line-height: 70px;
}
</style>